<template lang="html">
  <div class="banner">
    <swiper :options="swiperOption"> 
      <swiper-slide>
        <img :src="this.swiperData[0]">
      </swiper-slide>
      <swiper-slide>
        <img :src="this.swiperData[1]">
      </swiper-slide>
      <swiper-slide>
        <img :src="this.swiperData[2]">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>

import 'swiper/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  name: "swiperBanner",
  data(){
    return{
      swiperData: [],
      swiperOption:{
        pagination: {
          el: '.swiper-pagination',
        },
        autoplay:true
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  mounted() {
    const url = this.HOST + "/banner";
    this.$axios
      .get(url)
      .then(res => {
        res.data.banners.forEach(item => {
          this.swiperData.push(item.imageUrl);
        });
      })
      .catch(err => {
        console.log("错误" + err);
      });
  }
}
</script>

<style scoped>

.banner{
  padding: 10px;
}

</style>
